<template>
  <view class="comment">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">评论列表</block>
    </cu-custom>
		<Loading :loadModal="loadModal" :hint="hint"></Loading>
	<scroll-view scroll-x class="bg-white nav">
    <view class='flex text-center'>
        <block v-for="(item,idx) in navItems" :data-data="item" :key="idx">
            <view class="cu-item flex-sub" :class="item.index==tabCur?'text-green cur':''" @tap='tabSelect' :data-id="item.index">
                {{item.name}}
            </view>
        </block>
    </view>
	</scroll-view>
	<view class="cu-list menu-avatar">
		<view :class="curId==item._id?'cu-item move-cur':'cu-item'" v-for="(item,idx) in comments" :key="idx"  :data-idx="idx" :id="item._id" :data-comment="item.comment" :data-flag="item.flag" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd">
			<view class="cu-avatar round lg" :style="{backgroundImage:'url('+item.cAvatarUrl+')'}"></view>
			<view class="content">
				<view class="text-grey">{{item.cNickName}}</view>
				<view class="text-gray text-sm flex">
					<text class="text-cut">{{item.comment}}</text>
				</view>
			</view>
			<view class="action">
				<view class="text-grey text-xs">{{item.createDate}}</view>
				<view class="cu-tag round bg-red sm" >{{item.childComment.length}}</view>
			</view>
			<view class="move">
				<view :class="tabCur === 0 ? 'bg-red':tabCur==1?'bg-orange':tabCur==2?'bg-red':'bg-blue'" :data-count="item.childComment.length+1" :data-postId="item.postId" :id="item._id" data-action="1" @tap='changeCommentFlagById'>{{tabCur === 0 ? "删除" :tabCur==1?"不通过":tabCur==2?"删除":"恢复"}}</view>
				<view v-if="tabCur==1" class="bg-green" :data-count="item.childComment.length+1" :data-postId="item.postId" :id="item._id" data-action="2" @tap='changeCommentFlagById'>通过</view>
			</view>
		</view>
	</view>
	<!-- 数据不存在 -->
	<Nodata :noModal="nodata"></Nodata>
	<!-- 评论处理窗口 -->
	<view :class="isChildShow?'cu-modal show':'cu-modal'">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class='content'>评论操作</view>
				<view class='action' @tap='hideCommentModal'>
					<text class='cuIcon-close text-red'></text>
				</view>
			</view>
			<view class='padding-sm'>
				<view class="cu-form-group">
					<view class="title">评论状态：</view>
					<view v-if="curFlag===1" class="cu-tag round bg-red light">已隐藏</view>
					<view v-if="curFlag===0" class="cu-tag round bg-green light">已显示</view>
				</view>
				<view v-if="isChildShow" class="cu-form-group text-left">
					<textarea placeholder="评论内容" maxlength="-1" name='releaseContent' :value="'评论内容：'+curComment" placeholder-class='placeholder'></textarea>
				</view>
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class='action'>
					<button class='cu-btn' @tap='hideCommentModal'>取消</button>
					<button class='cu-btn margin-left bg-green' @tap='deleteCommentModal'>删除</button>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
	import util from '../../utils/util.js';
	import api from '../../utils/api.js';
	import Loading from '../../components/loading.vue';
	import Nodata from '../../components/nodata.vue';
	export default {
		components: {
			Loading,
			Nodata
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				navItems: [{ name: '待审核', index: 1 },{ name: '已展示', index: 0 }, { name: '不通过', index: 2 }, { name: '已删除', index: 3 }],
				tabCur: 1,
				scrollLeft: 0,
				comments: [],
				page: 1,
				nodata: false,
				loadModal: false, //加载
				hint: '加载中...',
				TouchStart: 0,
				ListTouchDirection: null,
				isChildShow: false,
				curId: "",
				curFlag: 0,
				curComment: ""
			};
		},
		onLoad: async function (options) {
			await this.getCommentsList();
		},
		methods: {
			 /**
			 * tab切换
			 * @param {} e
			 */
			async tabSelect(e) {
				let that = this;
				that.tabCur= e.currentTarget.dataset.id;
				that.scrollLeft= (e.currentTarget.dataset.id - 1) * 60;
				that.hint = '加载中...';
				that.page= 1;
				await this.getCommentsList()
			},
			/**
			 * 获取文章列表
			*/
			async getCommentsList() {
				let that = this;
				let page = that.page;
				that.loadModal = true;
				let result = await api.getCommentsList(page, that.tabCur);
				that.loadModal = false;
				that.comments = that.page == 1 ? result.data : [...that.comments, ...result.data];
				that.nodata = result.data.length === 0 && page == 1 ? true : false;
				if (result.data.length == 0) {
				  uni.showToast({
				    title: '没有更多数据了！',
				    icon: 'none',
				    duration: 2000
				  })
				}
				uni.hideNavigationBarLoading();
				uni.hideLoading();
				uni.stopPullDownRefresh();
			},
			/**
			 * 隐藏
			 * @param {*} e
			 */
			hideCommentModal(e) {
				this.isChildShow= false;
				this.curId= "";
				this.curFlag= 0;
				this.curComment= "";
			},
			/**
			* 显示
			* @param {} e
			*/
			showChildModal(e) {
				console.info(e);
				this.isChildShow= true;
				this.curId= e.currentTarget.id;
				this.curFlag= e.currentTarget.dataset.flag;
				this.curComment= e.currentTarget.dataset.comment;
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.TouchStart= e.touches[0].pageX;
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.ListTouchDirection= e.touches[0].pageX - this.TouchStart > 0 ? 'right' : 'left';
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.ListTouchDirection == 'left') {
					this.curId= e.currentTarget.id;
				} else {
					this.curId= "";
				}
				this.ListTouchDirection= null;
			},
			/**
			 * 删除评论
			 * @param {*} e
			 */
			async changeCommentFlagById(e) {
				let that = this;
				that.hint = '设置中...';
				that.loadModal = true;
				try {		
					let commentId = e.currentTarget.id;
					let postId = e.currentTarget.dataset.postid;
					let action = e.currentTarget.dataset.action;
					let count = that.tabCur === 0 ? e.currentTarget.dataset.count * -1 :that.tabCur === 1&&action==2 ? e.currentTarget.dataset.count:0;
					let flag = that.tabCur === 1&&action==2 ? 0 : that.tabCur === 1?2:that.tabCur === 3?1:3;
					let res = await api.changeCommentFlagById(commentId, flag, postId, count);
					that.loadModal = false;
					if (res.result) {
						that.page=1;
						that.getCommentsList();
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							duration: 1500
						});
					}
					else {
						uni.showToast({
							title: '操作发生未知异常',
							duration: 1500
						});
					}
					uni.hideNavigationBarLoading();
					uni.hideLoading();
					uni.stopPullDownRefresh();
				} catch (err) {
					uni.showToast({
						title: '程序有一点点小异常，操作失败啦',
						icon: 'none',
						duration: 1500
					})
					console.info(err)
				}
				finally {
					uni.hideLoading();
				}
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: async function () {
			this.page= 1;
			this.hint = '刷新中...';
			await this.getCommentsList()
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: async function () {
			this.page = this.page + 1;
			this.hint = '加载中...';
			await this.getCommentsList()
		},
	};
</script>

<style>
.margin-top-self {
    margin-top: 80rpx;
  }
</style>
